<template>
<van-nav-bar
    title="登录"
  />
<div class="login-container">
  <van-image class="user-icon" :src="loginuser"></van-image>
  <van-cell-group>
    <van-field v-model="account" clearable label="账号" placeholder="请输入账号" @click="onClickIcon" />
    <van-field v-model="password" type="password" label="密码" placeholder="请输入密码" />
  </van-cell-group>
  <div class="login-btn" @click="gotologin">登录</div>
  <!-- <div  @click="toRegister">立即注册</div> -->
  <router-link to='register' class="register-btn">立即注册</router-link>
  <div class="third">第三方账号登录</div>
  <div class="wechat-login" open-type="getPhoneNumber"  bindgetphonenumber="thirdLogin">
    <van-image class="wechat-icon" :src="wechatlogin"></van-image>
  </div>
</div>
</template>

<script>
import loginuser from '../assets/images/login-user.png'
import wechatlogin from '../assets/images/wechat-login.png'
import router from '../router'
import { Toast } from 'vant';
import {
  Login,
  ThirdLogin
} from '@/api'
import {reactive,toRefs} from 'vue'
export default {
  name: 'address',
  setup(props) {
    //参数
    let login = reactive({
      addressList: [],
      account:'',
      password:'',
      wechatlogin:wechatlogin,
      loginuser:loginuser,
    })
    function onClickIcon(){

    }
    function gotologin(){
      if (login.account === '') {
        Toast('请输入账号');
        return;
      }
      if (login.password === '') {
        Toast('请输入密码');
        return
      }
      Login({
        username: login.account,
        password: login.password
      }).then(res => {
        if(res.code === 0){
          console.log('res',res)
          Toast.success(res.msg);
          localStorage.setItem('token',res.data.token)
          localStorage.setItem('userinfo',JSON.stringify(res.data))
          router.push('home')
        }else{
          Toast.fail(res.msg);
          console.log('res',res)
        }
      })
    }
    function toRegister(){

    }
  //   login() {
  //   if (this.data.account === '') {
  //     wx.showToast({
  //       icon: 'none',
  //       title: '请输入账号',
  //     })
  //     return;
  //   }
  //   if (this.data.password === '') {
  //     wx.showToast({
  //       icon: 'none',
  //       title: '请输入密码',
  //     })
  //     return
  //   }
  //   Login({
  //     username: this.data.account,
  //     password: this.data.password
  //   }).then(res => {
  //     console.log('login==>', res)
  //     if (res.status === 1) {
  //       wx.setStorageSync('token', res.data.data.token)
  //       wx.setStorageSync('userinfo', res.data.data)
  //       wx.showToast({
  //         title: '登录成功',
  //         icon: 'success',
  //         success() {
  //           wx.navigateBack()
  //         }
  //       })
  //     }
  //   })
  // },

  // toRegister() {
  //   wx.navigateTo({
  //     url: '/pages/register/index',
  //   })
  // },

  // thirdLogin(e) {
  //   console.log('get phone ==>', e)
  //   if (e.detail.errMsg === 'getPhoneNumber:ok') {
  //     wx.login({
  //       success: res => {
  //         if (res.code) {
  //           ThirdLogin({
  //             code: res.code,
  //             iv: e.detail.iv,
  //             encryptedData: e.detail.encryptedData
  //           }).then(res => {
  //             console.log('third login ==>', res)
  //           })
  //         }
  //       }
  //     })
  //   }
  // }
    // GetAllAddress().then(res => {
    //   console.log('get all address==>', res)
    //   if (res.status === 1) {
    //     let addressList = res.data.data;
    //     addressList.forEach(item => {
    //       item.address = `${item.provinceName}${item.cityName}${item.countyName}${item.detailInfo}`
    //     })
    //     this.setData({
    //       addressList
    //     })
    //   }
    // })
    //挂载
    return{ ...toRefs(login),onClickIcon,toRegister,gotologin}
  }
}
</script>

<style scoped>
.login-container{
  display:flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
}

.user-icon{
  display: block;
  width:200px;
  height: 200px;
}

van-cell-group{
  width:85%;
  margin-top: 20px;
}

.login-btn{
  width:85%;
  height: 80px;
  line-height: 80px;
  letter-spacing: 10px;
  margin-top: 80px;
  border-radius: 5px;
  color:#ffffff;
  background-color: #31b573;
  text-align: center;
}

.register-btn{
  margin-top: 30px;
  font-size: 26px;
  letter-spacing: 10px;
  color:#9c9c9c;
}

.third{
  position: relative;
  margin-top: 80px;
  font-size: 26px;
  color:#9c9c9c;
}

.third::before,.third::after{
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  content: '';
  display: block;
  width:200px;
  height: 2px;
  background-color: #e6e6e6;
}

.third::before{
  left:-220px;
}

.third::after{
  right:-220px;
}

.wechat-login{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
  padding:15px;
  border-radius: 50%;
  background-color: #eeeeee;
}

.wechat-login::after{
  border: none;
}

.wechat-icon{
  display: block;
  width:70px;
  height: 60px;
}
</style>